<template>
	<section>
		<div class="video-card-box clear">
			<!-- video-card -->
			<div class="video-card" v-for="item in res_data" :key="item.aid">
				<div class="video-card-width">
					<router-link class="video-link" :to="item.path" target="_blank">
						<div class="video-img">
							<img :src="imgBaseUrl+item.pic" alt="" />
						</div>
						<div class="video-info">
							<div class="video-info-bg"></div>
							<div class="video-info-zindex">
								<div class="video-title">{{item.title}}</div>
								<div class="video-from">
									<span :class="`icon-from icon-from-${item.pub_platform}`"></span>
									<span class="minutes">{{ item.minute }}</span>
								</div>
							</div>
						</div>
					</router-link>
					<div class="video-click">
						<span :class="item.storeClass" @click="storeFn(item)">{{item.store_num}}</span>
						<span :class="item.good" @click="goodFn(item)">{{item.good_num}}</span>
					</div>
				</div>
			</div>
			<!-- video-card -->
		</div>
		<div class="loading-more">
			<span class="btn" @click="getResData" v-if="pageBtn">加载更多...</span>
			<span v-if="!pageBtn">没有更多了...</span>
		</div>
	</section>
</template>

<script>
import { getmenuvideo, IPGetarticlelist, subjectGetarticlelist, topicGetarticlelist, updategood, storefrontAdd, imgBaseUrl } from '@/api';
import { utilStore, utilGood } from '@/util/util'
import { mapState, mapMutations } from 'vuex'
export default {
	data () {
		return {
			// 界面展示
			res_data: [],
			imgBaseUrl,
			pageBtn: false,
			page: 1,
			ip_id: null,
			menu_id: null,
			subject_id: null,
			topic_id: null,
			is_scrolling: true,
		}
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	watch: {
		'$route' (to, from) {
			// 对路由变化作出响应...
			this.page = 1,
			this.getResData();
		}
	},
	// 监听是否已登录
	mounted () {
		this.getResData();
		let _this = this;
		var backToTop = document.getElementById('backToTop');
		window.onscroll = function(){ 
			let scroll = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
			let win = document.documentElement.offsetHeight || document.body.offsetHeight;
			let dom = document.documentElement.scrollHeight || document.body.scrollHeight;
			// 返回顶部
			backToTop.style.display = scroll<150 ? 'none' : 'block';

		　　if((dom - win - scroll) <=150 && _this.pageBtn && _this.is_scrolling){
				_this.is_scrolling = false;
				_this.getResData();
		　　}
		}
	},
	methods: {
		...mapMutations([
			'DIALOG_LOGIN',
		]),
		// 收藏 
		storeFn(item){
			utilStore(item, this, 'res_data', storefrontAdd);
		},
		goodFn(item){
			utilGood(item, this, 'res_data', updategood);
		},
		// 设置数据
		setResData(res, path){
			if(res.data){
				let data = res.data;
				for(let i =0;i<data.length; i++){
					data[i].storeClass = data[i].store!=1?'icon-bg icon-store-o':'icon-bg icon-store';'icon-bg icon-store-o';
					data[i].good = 'icon-bg icon-good-o';
					data[i].goodcan = true;
					switch(path){
						case 'ip':
							data[i].path = {path: `/ip/v/${data[i].aid}`};
							break;
						case 'subject':
							data[i].path = {path: `/subject/v/${data[i].aid}`};
							break;
						case 'topic':
							data[i].path = {path: `/topic/v/${data[i].aid}`};
							break;
						default:
							data[i].path = { path: `/channel/${data[i].menu_id}/${data[i].aid}`};
					}
				}

				if(this.page===1){
					this.res_data = data;
					if(res.total>9){
						this.pageBtn = true;
					}else{
						this.pageBtn = false;
					}
				}else{
					this.res_data = this.res_data.concat(data);
				}

				let pageTotal = Math.ceil(res.total/9);
				if(this.page<pageTotal){
					this.page++;
				}else{
					this.pageBtn = false;
				}
				this.is_scrolling = true; 
			}else{
				this.$message.warning(res.msg);
			}
		},
		// 加载页面数据
		getResData(){
			this.menu_id = this.$route.params.menu_id;
			this.ip_id = this.$route.params.ip_id;
			this.topic_id = this.$route.params.topic_id;
			this.subject_id = this.$route.params.subject_id;
			
			let para = {};
			if(this.menu_id){
				para = {
					menu_id: this.menu_id,
					page: this.page,
					pagesize: 9,
					user_id: this.userInfo?this.userInfo.user_id:'',
				};

				getmenuvideo(para).then(res => {
					this.setResData(res, 'menu');
				});

			}else if(this.ip_id){
				para = {
					ip_id: this.ip_id,
					page: this.page,
					pagesize: 9,
					user_id: this.userInfo?this.userInfo.user_id:'',
				};
				// console.log(para);
				IPGetarticlelist(para).then(res => {
					this.setResData(res, 'ip');
					this.$emit('child-say',res.ip_info);
				});
			}else if(this.subject_id){
				para = {
					subject_id: this.subject_id,
					page: this.page,
					pagesize: 9,
					user_id: this.userInfo?this.userInfo.user_id:'',
				};
				// console.log(para);
				subjectGetarticlelist(para).then(res => {
					this.setResData(res, 'subject');
					this.$emit('child-say',res.subject_info);
				});
			}else if(this.topic_id){
				para = {
					topic_id: this.topic_id,
					page: this.page,
					pagesize: 9,
					user_id: this.userInfo?this.userInfo.user_id:'',
				};
				// console.log(para);
				topicGetarticlelist(para).then(res => {
					this.setResData(res, 'topic');
				});
			}
		},
	},
	
	
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.video-list{
	.video {
		margin: 10px 20px 15px 0;
	}
}
</style>
